<template>
    <div>
        <div class="tabs-content-box" style="width: 20%; height: 100%;float:left;">
            <div class="tableTitle">项目基本信息</div>
            <div class="quality-info">
                <p><span>项目预算:</span><span class="info-value color1">{{QualityList.projectBudget}}</span></p>
                <p><span>项目编号:</span><span class="info-value">{{QualityList.projectNumber}}</span></p>
                <p><span>建设周期:</span><span class="info-value">{{QualityList.projectCycle}}</span></p>
                <p><span>负责人:</span><span class="info-value">{{QualityList.projectLeader}}</span></p>
                <p><span>资金性质:</span><span class="info-value">{{QualityList.nature}}</span></p>
            </div>
        </div>
        <div class="tabs-content-box" style="width: 40%; height: 100%;float:left;">
            <div class="tableTitle">{{ProcessList.title}}</div>
            <div class="process-info">
                <div class="part-info">
                    <span>已执行额度(万元)</span>
                    <span class="part-value color1">{{ProcessList.executed}}</span>
                </div>
                <div class="part-info">
                    <span>占比</span>
                    <span class="part-value color1">{{ProcessList.executedRate}}</span>
                </div>
                <div class="part-info">
                    <span>剩余可执行额度(万元)</span>
                    <span class="part-value color2">{{ProcessList.unexecuted}}</span>
                </div>
                <div class="part-info">
                    <span>占比</span>
                    <span class="part-value color2">{{ProcessList.unexecutedRate}}</span>
                </div>
            </div>
            <v-chart :options="barOption1" :style="{width: '100%', height: '100%'}" :autoresize="true"> </v-chart>
        </div>
        <div class="tabs-content-box" style="width: 36%; height: 100%;float:right;">
            <v-chart :options="barOption2" :style="{width: '100%', height: '230px'}" :autoresize="true"> </v-chart>
        </div>
    </div>
</template>

<script>
import { projectKanban } from './data/Content.js';
import ECharts from '~/static/js/vue-echarts';
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default {
    name: 'WaterQualityFunds',
    data () {
        return {
            QualityList:[],
            ProcessList:[],
            barOption1:{},
            barOption2:{}
        };
    },
    created:function (){
        this.getQualityList();
        this.getProcessList();
    },
    components: {
        'v-chart': ECharts
    },
    methods: {
        getQualityList(){
            this.$axios.get(projectKanban.qualityUrl1)
                .then(res => {
                    console.log(res);
                    this.QualityList = res.data[0].qualityInfo[0];
                });
        },
        getProcessList(){
            this.$axios.get(projectKanban.qualityUrl1)
                .then(res => {
                    console.log(res);
                    this.ProcessList = res.data[0].processInfo[0];
                });
        }  
    },
    mounted() {
        this.$axios.get(projectKanban.qualityUrl2)
            .then(res => {
                console.log(res);
                this.barOption1 = res.data;
            });
        this.$axios.get(projectKanban.qualityUrl3)
            .then(res => {
                console.log(res);
                this.barOption2 = res.data;
            });
    }
};
</script>

<style lang="scss" scoped>
    .tableTitle{
      font-size:14px;
      font-weight:bold;
      color:#333;
      margin-bottom:6px;
    }
    .quality-info{
        background: #F0F2F4;
        border-radius: 10px;
        padding:15px 2%;
        p{
            margin:0;
            padding:0;
            line-height:30px;
            span{
                text-align:right;
                width:80px;
                display:inline-block;
            }
            span.info-value{
                width:auto;
                text-align:left;
                font-weight:bold;
                margin-left:3%;
            }
        }
    }
    .color1{
        color:#0066FF!important;
    }
    .color2{
        color:#F7B500!important;
    }
    .process-info{
        padding:15px;
        .part-info{
            display:inline-block;
            padding-right: 8%;
            span{
                color:#666;
                font-size:12px;
                display:block;
                padding: 5px 0;
            }
            span.part-value{
                font-size:16px;
                font-weight:bold;
            }
        }
    }
</style>